<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>系统安装</title>
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/falan.js"></script>
    <script type="text/javascript" src="/static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/static/js/xadmin.js"></script>
    <style>
        body { font-family: Arial, sans-serif; max-width: 500px; margin: 0 auto; padding: 20px; }
        .form-group { margin-bottom: 15px; }
        label { display: block; margin-bottom: 5px; }
        input[type="text"], input[type="password"] { width: 100%; padding: 8px; }
        button { padding: 10px 15px; background: #007bff; color: white; border: none; cursor: pointer; }
        button:hover { background: #0056b3; }
        .error{border:1px solid red}
        #m1{background-color: #93D1FF;}
        .ms{width: 26%;border: 1px solid #ddd;height: 25px;margin: 0px 2%;display: inline-block;background-color: #f0f0f0;}
        #admin{display: none;}
        #success{display: none;}
        .heibu{width: 100%;height: 100%;position: fixed;left: 0px;top:0px;background: rgba(0,0,0,0.3);z-index: 1000;display: none;}
        .atfer{width: 300px;height: 100px;margin-top: -101px;margin-left: -151px;position: absolute;z-index:1001;left:50%;top:30%;background: white;border: 1px solid #000;}
        .atfer h2{width: 90%;margin: 0px 5%;text-align: center;height: 100px;}
        .atfer a{width: 25px;height: 25px;line-height: 25px;border-radius: 50%;background-color: red;color: #fff;text-align: center;font-weight: bold;text-decoration: none;position: absolute;left:50%;top:30%;margin-top: -44px;margin-left: 138px;}
        .zz{display: none;width: 80px;height: 80px;position: absolute;z-index:1001;left:50%;top:30%;margin-top: -40px;margin-left: 40px;}
        .zz img{width: 100%;height: 100%}
    </style>
</head>
<body>
<h1>系统安装</h1>
<div class="heibu" id="heibu">
    <div class="zz" id="zz">
        <img src="/zz.gif" alt="">
    </div>
    <div class="atfer" id="after">
        <a href="javascript:;" onclick="document.getElementById('heibu').style = 'display:none'">X</a>
        <h2 id="error"></h2>
    </div>
</div>
<div class="m">
    <div class="ms" id="m1"></div>
    <div class="ms" id="m2"></div>
    <div class="ms" id="m3"></div>
</div>
<div id="database">
    <div class="form-group">
        <label for="db_host">数据库主机地址:</label>
        <input type="text" id="db_host" name="db_host" value="localhost" required>
    </div>
    <div class="form-group">
        <label for="db_name">数据库名称:</label>
        <input type="text" id="db_name" name="db_name" value="ccc" required>
    </div>
    <div class="form-group">
        <label for="db_user">数据库用户名:</label>
        <input type="text" id="db_user" name="db_user" value="root" required>
    </div>
    <div class="form-group">
        <label for="db_pass">数据库密码:</label>
        <input type="password" id="db_pass" name="db_pass" value="root">
    </div>
    <div class="form-group">
        <label for="db_pass">数据库端口:</label>
        <input type="text" id="db_duankou" value="3306" name="db_duankou">
    </div>
    <button type="button" onclick="install()">安装</button>
</div>
<div id="admin">
    <div class="form-group">
        <label for="admin_user">网站网址:</label>
        <input type="text" id="web" value="localhost" required>
    </div>
    <div class="form-group">
        <label for="admin_user">网站名称:</label>
        <input type="text" id="name"  value="本地1" required>
    </div>
    <div class="form-group">
        <label for="admin_user">联系方式:</label>
        <input type="text" id="mobile"  value="" placeholder="没有可以不填">
    </div>
    <div class="form-group">
        <label for="admin_user">管理员账号:</label>
        <input type="text" id="admin_user" name="admin_user" value="admin" required>
    </div>
    <div class="form-group">
        <label for="admin_pass">管理员密码:</label>
        <input type="text" id="admin_pass" name="admin_pass" value="admin" required>
    </div>
    <button type="button" onclick="admin()">安装</button>
</div>
<div id="success">
    <div class="tishi">
        创建成功。<br/>
        3秒后跳转后台。
    </div>
</div>
</body>
<script>
    function errormsg(msg){
        document.getElementById('error').innerText = msg;
        document.getElementById('zz').style = 'display:none;';
        document.getElementById('after').style = 'display:block';
        document.getElementById('heibu').style = 'display:block';
    }
    function zhuanquan(){
        document.getElementById('zz').style = 'display:block;';
        document.getElementById('after').style = 'display:none;';
        document.getElementById('heibu').style = 'display:block';
    }
    function none(){
        document.getElementById('heibu').style = 'display:none';
    }
    function install(){
        let i,
            message = {},
            field = ['db_host', 'db_name', 'db_user', 'db_pass','db_duankou'],
            input = document.getElementsByTagName('input');
        for (i = 0;i < input.length;i++){
            message[input[i].id] = input[i].value;
        }
        console.log(message);
        for (i = 0;i < field.length;i++){
            if (!message[field[i]]) {
                document.getElementById(field[i]).className = 'error';
                return;
            }
        }
        $.ajax({
            url: '/install', // 你的 PHP 脚本的 URL
            type: 'post', // 请求类型，可以是 'GET' 或 'POST'
            dataType: 'json', // 预期服务器返回的数据类型
            data: message,
            success: function(res) {
                if (res.code == 400)
                    return errormsg(res.msg);
                document.getElementById('m2').style = 'background-color: #93D1FF;';
                document.getElementById('database').style = 'display:none';
                document.getElementById('admin').style = 'display:block';
            }
        });
    }
    function admin(){
        let i,
            message = {},
            field = ['admin_user','admin_pass','web','name'],
            input = document.getElementsByTagName('input');
        for (i = 0;i < input.length;i++){
            message[input[i].id] = input[i].value;
        }
        console.log(message);
        for (i = 0;i < field.length;i++){
            if (!message[field[i]]) {
                document.getElementById(field[i]).className = 'error';
                return;
            }
        }
        zhuanquan();
        $.ajax({
            url: '/system', // 你的 PHP 脚本的 URL
            type: 'post', // 请求类型，可以是 'GET' 或 'POST'
            dataType: 'json', // 预期服务器返回的数据类型
            data: message,
            success: function(res) {
                none();
                if (res.code == 400)
                    return errormsg(res.msg);
                document.getElementById('admin').style = 'display:none';
                document.getElementById('success').style = 'display:block';
                document.getElementById('m3').style = 'background-color: #93D1FF;';
                setTimeout(function() {
                    window.location.href = "/admin/login"; // 替换为你要跳转的目标URL
                }, 3000); // 3000毫秒 = 3秒
            }
        });
    }
</script>
</html>